<template>
  <div
      class="loading-wrap"
      v-show="show"
  >
      <div class="loadEffect"></div>
      <span>{{text}}</span>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name:'loading',
  setup() {
    const show = ref(false)
    const text = ref('检测中...')
    return {
      show,
      text
    }
  },

}
</script>

<style scoped>
  .loadingWrap .van-popup{
    background-color:rgba(0,0,0,.7)
  }
  .loading-wrap {
    min-width: 100px;
    height: 30px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .loadEffect{
    border: 2px solid hsla(185, 85%, 92%, 0.2);
    border-top-color: #f2f4f4;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .loading-wrap span {
    font-size: 14px;
    color: #fff;
    margin-left: 6px;
  }
</style>